<template>
	<view>
		<uni-calendar :insert="true" :lunar="true" :start-date="'1978-12-18'" :end-date="'2050-12-18'"
			:selected="selectDate" @change="onchange" />
		<view class="content">
			<view class="title">日期详情</view>

			<view class="list-item" style="background-color: #eff6ff;">
				<view style="color: #4288ff;">公历</view>
				<view class="second">{{fulldate}}</view>
				<view class="third">{{ncWeek}}</view>
			</view>

			<view class="list-item" style="background-color: #fff7ed;">
				<view style="color: #966963;">农历</view>
				<view class="second">{{gzYear}}年({{Animal}}年)</view>
				<view class="third">{{IMonthCn}}{{IDayCn}} <text style="margin-left: 20rpx;">{{jieQi}}</text></view>
			</view>

			<view v-if="extraInfo && extraInfo.info" class="list-item" style="background-color: #fef2f2;">
				<view style="color: #6c0000;">节日</view>
				<view class="second">
					<view class="tag" style="background-color: #ff5000;">{{extraInfo.info}}</view>
				</view>
			</view>

			<view class="list-item" style="background-color: #ecfaec;">
				<view style="color: #045904;">宜</view>
				<view class="second">
					<view class="tag" style="background-color: #2aa92a;" v-for="(item,index) in dayYi" :key="item">
						{{item}}</view>
				</view>
			</view>

			<view class="list-item" style="background-color: #fef2f2;">
				<view style="color: #6c0000;">忌</view>
				<view class="second">
					<view class="tag" style="background-color: #e2594d;" v-for="(item,index) in dayJi" :key="item">
						{{item}}</view>
				</view>
			</view>
		</view>

		<view style="height: 1rpx;"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import Calendar from "@/uni_modules/uni-calendar/components/uni-calendar/util.js"
	import {
		Lunar
	} from "lunar-javascript"

	const fulldate = ref("") //当前日期yyyy年mm月dd日
	const ncWeek = ref("") //星期几
	const gzYear = ref("") //农历 干支 年
	const Animal = ref("") //生肖年
	const IMonthCn = ref("") // 农历中文月
	const IDayCn = ref("") //农历中文日
	const extraInfo = ref() // 节日信息
	const dayYi = ref([]) //每日宜
	const dayJi = ref("") //每日忌
	const jieQi = ref("") //节气
	const selectDate = ref([]) // 法定节假日、节气渲染

	onLoad(() => {
		let e = new Calendar()
		// console.log('onLoad',e.getDate())
		// console.log('onLoad',e.getlunar())
		fulldate.value = uni.$uv.timeFormat(e.getDate().fulldate, "yyyy年mm月dd日")
		ncWeek.value = e.getlunar().ncWeek
		gzYear.value = e.getlunar().gzYear
		Animal.value = e.getlunar().Animal
		IMonthCn.value = e.getlunar().IMonthCn
		IDayCn.value = e.getlunar().IDayCn
		dayYi.value = Lunar.fromDate(new Date()).getDayYi()
		dayJi.value = Lunar.fromDate(new Date()).getDayJi()
		let lYear = e.getlunar().lYear // 农历数字年
		let lMonth = e.getlunar().lMonth // 农历数字月
		let lDay = e.getlunar().lDay // 农历数字日
		jieQi.value = Lunar.fromYmd(lYear, lMonth, lDay).getJieQi()

		selectDate.value = getHoliday('2025').concat(getJieQiTable(lYear, lMonth, lDay))
		// console.log(selectDate.value)
	})

	function getHoliday(year) {
		return [{
			date: year + "-01-01",
			info: "元旦"
		}, {
			date: year + "-03-08",
			info: "妇女节"
		}, {
			date: year + "-04-01",
			info: "愚人节"
		}, {
			date: year + "-05-01",
			info: "劳动节"
		}, {
			date: year + "-05-04",
			info: "青年节"
		}, {
			date: year + "-06-01",
			info: "儿童节"
		}, {
			date: year + "-07-01",
			info: "建党节"
		}, {
			date: year + "-08-01",
			info: "建军节"
		}, {
			date: year + "-09-10",
			info: "教师节"
		}, {
			date: year + "-10-01",
			info: "国庆节"
		}]
	}

	function getJieQiTable(lYear, lMonth, lDay) {
		let table = []
		let jqObj = Lunar.fromYmd(lYear, lMonth, lDay).getJieQiTable()
		for (var key in jqObj) {
			if (jqObj.hasOwnProperty(key)) {
				var element = jqObj[key];
				// console.log(key)
				table.push({
					date: `${element._p.year}-${element._p.month}-${element._p.day}`,
					info: key
				})
			}
		}
		return table
	}

	function onchange(e) {
		// console.log(e)
		fulldate.value = uni.$uv.timeFormat(e.fulldate, "yyyy年mm月dd日")
		ncWeek.value = e.lunar.ncWeek
		gzYear.value = e.lunar.gzYear
		Animal.value = e.lunar.Animal
		IMonthCn.value = e.lunar.IMonthCn
		IDayCn.value = e.lunar.IDayCn
		extraInfo.value = e.extraInfo
		dayYi.value = Lunar.fromDate(new Date(e.fulldate)).getDayYi()
		dayJi.value = Lunar.fromDate(new Date(e.fulldate)).getDayJi()
		let lYear = e.lunar.lYear // 农历数字年
		let lMonth = e.lunar.lMonth // 农历数字月
		let lDay = e.lunar.lDay // 农历数字日
		jieQi.value = Lunar.fromYmd(lYear, lMonth, lDay).getJieQi()
	}
</script>

<style>
	@import "calendar.css"
</style>